@use '../mixins/config' as *;

// flex-direction
// generate .yq-${flexWrapKey}, .yq-${flexWrapKey}-i
$directions: (
    'flex-row': row,
    'flex-row-reverse': row-reverse,
    'flex-col': column,
    'flex-col-reverse': column-reverse,
);
@each $key, $value in $directions {
    .#{$namespace}-#{$key} {
        flex-direction: $value;
        &-i {
            flex-direction: $value !important;
        }
    }
}

// flex-wrap
// generate .yq-${flexWrapKey}, .yq-${flexWrapKey}-i
$flexWraps: (
    'flex-wrap': wrap,
    'flex-wrap-reverse': wrap-reverse,
    'flex-nowrap': nowrap,
);
@each $key, $value in $flexWraps {
    .#{$namespace}-#{$key} {
        flex-wrap: $value;
        &-i {
            flex-wrap: $value !important;
        }
    }
}

// justify-content
// generate .yq-${justifyKey}, .yq-${justifyKey}-i
$justifys: (
    'justify-start': flex-start,
    'justify-end': flex-end,
    'justify-center': center,
    'justify-between': space-between,
    'justify-around': space-around,
    'justify-evenly': space-evenly,
);
@each $key, $value in $justifys {
    .#{$namespace}-#{$key} {
        justify-content: $value;
        &-i {
            justify-content: $value !important;
        }
    }
}

// align-items
// generate .yq-${alignKey}, .yq-${alignKey}-i
$aligns: (
    'items-start': flex-start,
    'items-end': flex-end,
    'items-center': center,
    'items-baseline': baseline,
    'items-stretch': stretch,
);
@each $key, $value in $aligns {
    .#{$namespace}-#{$key} {
        align-items: $value;
        &-i {
            align-items: $value !important;
        }
    }
}

// flex-basis
// generate .yq-basis-n/m, .yq-basis-n/m-i
// .yq-basis-1of2	flex-basis: 50%;
// .yq-basis-1of3	flex-basis: 33.333333%;
// .yq-basis-2of3	flex-basis: 66.666667%;
// .yq-basis-1of4	flex-basis: 25%;
// .yq-basis-2of4	flex-basis: 50%;
// .yq-basis-3of4	flex-basis: 75%;
// .yq-basis-1of5	flex-basis: 20%;
// .yq-basis-2of5	flex-basis: 40%;
// .yq-basis-3of5	flex-basis: 60%;
// .yq-basis-4of5	flex-basis: 80%;
// .yq-basis-1of6	flex-basis: 16.666667%;
// .yq-basis-2of6	flex-basis: 33.333333%;
// .yq-basis-3of6	flex-basis: 50%;
// .yq-basis-4of6	flex-basis: 66.666667%;
// .yq-basis-5of6	flex-basis: 83.333333%;
// .yq-basis-1of12	flex-basis: 8.333333%;
// .yq-basis-2of12	flex-basis: 16.666667%;
// .yq-basis-3of12	flex-basis: 25%;
// .yq-basis-4of12	flex-basis: 33.333333%;
// .yq-basis-5of12	flex-basis: 41.666667%;
// .yq-basis-6of12	flex-basis: 50%;
// .yq-basis-7of12	flex-basis: 58.333333%;
// .yq-basis-8of12	flex-basis: 66.666667%;
// .yq-basis-9of12	flex-basis: 75%;
// .yq-basis-10of12	flex-basis: 83.333333%;
// .yq-basis-11of12	flex-basis: 91.666667%;
@for $i from 2 through 12 {
    @for $k from 1 through $i - 1 {
        .#{$namespace}-basis-#{$k}of#{$i} {
            flex-basis: calc($k / $i) * 100 * 1%;
            &-i {
                flex-basis: calc($k / $i) * 100 * 1% !important;
            }
        }
    }
}
// .yq-basis-full	flex-basis: 100%;
.#{$namespace}-basis-full {
    flex-basis: 100%;
    &-i {
        flex-basis: 100% !important;
    }
}

// flex
// generate .yq-flex-${flexType}, .yq-flex-${flexType}-i
$flexs: (
    1: 1 1 0%,
    auto: 1 1 auto,
    initial: 0 1 auto,
    none: none,
);
@each $key, $value in $flexs {
    %fix-overflow {
        min-width: 0;
        min-height: 0;
    }
    .#{$namespace}-flex-#{$key} {
        flex: $value;
        @if $key == 1 {
            @extend %fix-overflow;
        }
        &-i {
            flex: $value !important;
            @if $key == 1 {
                @extend %fix-overflow;
            }
        }
    }
}
